<template>
<div style="height:100%;width:100%;overflow:hidden">
    <div id="map"></div>
</div>
</template>
<script>
export default {
    data (){
        return {
        map:null
        }
    },
    mounted(){
       this.init()
    },
    methods: {
        init(){
          this.smartmapx.mapbase = 'http://www.smartmapx.com';
            this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
            this.map=new this.smartmapx.Map({
                container: 'map',
                mapId: 'map_id_1',
                center: [116.40686,39.90355],
                zoom: 16.8,
                pitch:70
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
                maxWidth: 100,
                unit: 'm'
            }));
        }
    },
}
</script>
<style scoped>
#map{
    height: 100%;
    width:100%;
}
</style>